import { useDispatch, useSelector } from "react-redux";
import "./App.css";
// 导入 action
import {
  increment,
  decrement,
  incrOffset,
  decrOffset,
} from "./store/modules/counterStore";

function App() {
  const { count } = useSelector((state) => state.counter);
  const dispatch = useDispatch();
  const incr = () => {
    dispatch(increment());
  };
  const decr = () => {
    dispatch(decrement());
  };
  const incr10 = () => {
    dispatch(incrOffset(10));
  };
  const decr10 = () => {
    dispatch(decrOffset(10));
  };

  return (
    <div>
      <h2>App</h2>
      <p>{count}</p>
      <p>
        <button onClick={incr}>increment</button>
      </p>
      <p>
        <button onClick={decr}>decrement</button>
      </p>
      <p>
        <button onClick={incr10}>increment 10</button>
      </p>
      <p>
        <button onClick={decr10}>decreemnt 10</button>
      </p>
    </div>
  );
}

export default App;
